<template>
  <div class="page-Body">
    <router-view v-if="$route.name === 'userDetails'"></router-view>
    <div v-else>
      <h2 class="page-title">用户管理</h2>
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户ID">
          <el-input
            v-model="formInline.uid"
            placeholder="请输入用户ID"
            clearable
            style="width: 250px"
            v-noSpace
          />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model="formInline.nickname"
            placeholder="请输入昵称"
            clearable
            style="width: 250px"
            v-noSpace
          />
        </el-form-item>
        <el-form-item label="手机">
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入手机号码"
            clearable
            v-noSpace
            style="width: 250px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Search">搜索</el-button>
          <el-button @click="Reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        fit
        empty-text="暂无数据"
        show-header
        v-loading="loading"
        size="default"
        element-loading-text="Loading..."
        :header-cell-style="{ background: '#e7e1fb' }"
        style="width: 100%"
        max-height="600px"
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="uid" label="用户ID" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="mobile" label="手机" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column prop="avatarUrl" label="头像" width="100">
          <template #default="scope">
            <el-avatar
              v-if="scope.row.avatarUrl"
              :src="scope.row.avatarUrl"
              :size="60"
            />
            <span v-else>暂无头像</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="tagNameList"
          label="个性标签"
          width="200"
          v-slot="scope"
        >
          <el-tag
            v-for="(item, index) in scope.row.tagNameList || []"
            :key="index"
            style="margin-right: 5px"
          >
            {{ item }}
          </el-tag>
        </el-table-column>

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          v-slot="scope"
        >
          <el-button link type="primary" @click="UserDetails(scope.row.uid)">
            用户详情
          </el-button>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 40, 80, 100]"
          background
          layout="total,sizes, prev, pager, next,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="UserManagementPage">
import { getUserList } from '@/api/User/user';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
// 获取 router 实例
const router = useRouter();
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 表单数据
const formInline = ref({
  uid: '',
  nickname: '',
  mobile: '',
});
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  UserList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  UserList();
};
// 获取列表
const UserList = async () => {
  loading.value = true;
  const res = await getUserList({
    current: currentPage.value,
    size: pageSize.value,
    query: { ...formInline.value },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
// 搜索校验
const hasSearchConditions = () => {
  const { uid, nickname, mobile } = formInline.value;
  return uid || nickname || mobile;
};
// 搜索
const Search = async () => {
  if (!hasSearchConditions()) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '请至少输入一个搜索条件',
      type: 'warning',
    });
    return;
  }
  UserList();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (
    formInline.value.uid === '' &&
    formInline.value.nickname === '' &&
    formInline.value.mobile === ''
  ) {
    return;
  }
  formInline.value = {};
  UserList();
};
// 用户详情
const UserDetails = (uid) => {
  router.push({
    name: 'userDetails',
    params: { uid },
  });
};
onMounted(() => {
  UserList();
});
</script>

<style lang="scss" scoped>
.el-DiaButton {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid #c7d4ff;
}
</style>
